<template>
  <div>
    <h1>watchEffect的使用</h1>
    <h1 v-text="num"></h1>
    <button @click="num++">自增</button>
    <hr />
    <h1 v-text="foo"></h1>
    <button @click="foo--">自减</button>
    <hr />
    <h1 v-text="bar.a"></h1>
    <button @click="bar.a++">改变</button>
  </div>
</template>

<script setup>
import { ref, reactive, watch, watchEffect,watchPostEffect,watchSyncEffect } from "vue";

let num = ref(1);
let foo = ref(200);
let bar = reactive({ a: 1, b: 2 });

// watchEffect(
//   () => {
//     console.log("执行副作用2", foo.value, num.value);
//   },
//   { flush: "post" }
// );

// watchEffect(
//   () => {
//     console.log("执行副作用1", foo.value, num.value);
//   },
//   { flush: "pre" }
// );

// ------------------------------

// 没有写 { flush: "pre" }, 默认也是pre
watchEffect(() => {
  console.log("执行副作用1", foo.value, num.value);
});

// sync是同步执行，轮到它的时候才会执行
watchEffect(
  () => {
    console.log("执行副作用3", foo.value, num.value);
  },
  { flush: "sync" }
);

watchEffect(
  () => {
    console.log("执行副作用2", foo.value, num.value);
  },
  { flush: "post" }
);

// // sync是同步执行，轮到它的时候才会执行
// watchEffect(
//   () => {
//     console.log("执行副作用3", foo.value, num.value);
//   },
//   { flush: "sync" }
// );

// ----------------------------------------

// watchEffect(() => {
//   console.log("执行副作用1", foo.value, num.value);
// });

// // sync是同步执行，轮到它的时候才会执行
// watchSyncEffect(
//   () => {
//     console.log("执行副作用3", foo.value, num.value);
//   }
// );

// // 后执行
// watchPostEffect(
//   () => {
//     console.log("执行副作用2", foo.value, num.value);
//   }
// );
</script>

<style lang="scss" scoped>
</style>